<script setup>
//响应式函数
import {ref} from 'vue'
//学生列表，声明一个json数组  key=value
const stuList = ref([
  {id: 9001,name: 'admin',address:'四川乐山'},
  {id: 10002,name: 'jack',address: '四川雅安'},
  {id: 9003,name: 'rose', address: '四川自贡'}
])
</script>

<template>
    <table width="100%" border="1">
      <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>地址</td>
      </tr>
      <tr  v-for="stu in stuList">
        <td>{{stu.id}}</td>
        <td>{{stu.name}}</td>
        <td>{{stu.address}}</td>
      </tr>
    </table>

  <table width="100%" border="1">
    <tr>
      <td>序号</td>
      <td>学号</td>
      <td>姓名</td>
      <td>地址</td>
    </tr>
    <tr  v-for="(stu,index) in stuList">
      <td>{{index+1}}</td>
      <td>{{stu.id}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.address}}</td>
    </tr>
  </table>
</template>

<style scoped>

</style>